import React, { Component } from 'react'
import axios from 'axios'
import PubSub from 'pubsub-js'
export default class search extends Component {
    search=async()=>{//和await一起用
     //获取文本框的值
     const value=this.keyWordElement.value
     //发布订阅
     PubSub.publish("gitxx",{isFirst:false,isLoading:true})
     //发送网络请求
		// axios.get(`/api1/search/users2?q=${value}`).then(
		// 	response => {
        //         console.log(response.data.items)
		// 		//请求成功后通知App更新状态
				
        //         PubSub.publish('gitxx',{isLoading:false,users:response.data.items})
		// 	},
		// 	error => {
		// 		//请求失败后通知App更新状态
				
        //         PubSub.publish('gitxx',{isLoading:false,err:error.message})
		// 	}
		// )
        //发送网络请求---使用fetch发送（未优化）
		/* fetch(`/api1/search/users2?q=${keyWord}`).then(
			response => {
				console.log('联系服务器成功了');
				return response.json()
			},
			error => {
				console.log('联系服务器失败了',error);
				return new Promise(()=>{})
			}
		).then(
			response => {console.log('获取数据成功了',response);},
			error => {console.log('获取数据失败了',error);}
		) */

		//发送网络请求---使用fetch发送（优化）
		try {
			const response= await fetch(`/api1/search/users2?q=${value}`)//和async一起用
			const data = await response.json()
			//console.log(data);
			PubSub.publish('gitxx',{isLoading:false,users:data.items})
		} catch (error) {
			console.log('请求出错',error);
			PubSub.publish('gitxx',{isLoading:false,err:error.message})
		}
    }
    render() {
        return (
           <section className="jumbotron">
               <h3 className="jumbotron-heading">搜索github用户</h3>
               <div>
                   <input type='text' placeholder="输入关键词点击搜索" ref={c=>this.keyWordElement=c}/>&nbsp;
                   <button onClick={this.search}>搜索</button>
               </div>
           </section>
        )
    }
}
